/**
 * ExtendDialog module
 */

 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var tool = require("../../../util/tool");
 var dataProvider = require("../provider/dataProvider");
 var React = require("react");
 var ExtendDialog = React.createClass({
    getInitialProps: function (){
        return {
            root: {}
        }
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.textarea = $(this.refs.textarea);
        this.elements.test = $('body');
        var root = this.props.root;
        if (typeof KindEditor !== "undefined"){
            var self = this;
            var kindOpts = {
                uploadJson: storage.data.CONST.upload_url,
                // resize forbidden
                resizeType: 0,
                // paste forbidden
                pasteType: 1,
                allowImageUpload: true,
                items: [
                    'bold', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', '|', 'image'
                ],
                width: "94%",
                afterBlur: function(){
                    self.handleOnContentChanged();
                },
                useContextmenu: false,//屏蔽自定义右键功能
                allowUpload:false,
                dialog:{
                    width: 684,
                    height: 300,
                }
            };
            var widget =this.props.data,content;
                content = widget.action.content || "";
            var id = "#richEditor";
            this.editor = KindEditor.create(id, kindOpts);
            var self = this;
            this.editor.clickToolbar('image',function(){
                self.editor.loadPlugin('image',function(){
                storage.data.is_edit_extend = true;
                root.openDialog(consts.WIDGET_TYPE.PICTURE,false,self,true);
                self.editor.hideDialog();
                })
            })
            this.editor.clickToolbar('link',function(){
                self.editor.loadPlugin('link',function(){
                    root.openDialog(consts.WIDGET_TYPE.LINK,false,self,true);
                    self.editor.hideDialog();
                })
            })
            this.editor.html(content);
        }
    },
    handleOnContentChanged: function (){
        var root = this.props.root;
        var content = this.editor.html();
        if(!content) return false;
        // 过滤换行符
        content = content.replace(/\r/g, "");
        content = content.replace(/\n/g, "");

        var data = this.props.data;
        var type = 'content';
        data.action = tool.rebuildWidgetData(data.action, type, content);
        dataProvider.updateWidget(data, function (){
            // 更新state,不重新拉取数据
            var widgets = root.state.widgets;
            for (var i in widgets){
                if (widgets[i].id == data.id){
                    widgets[i] = data;
                }
            }
            root.setState({
                widgets: widgets,
                selectedWidget: data
            });
        });
    },
    rebuildContent: function(srcs){
        var self = this;
        var content = self.editor.html();
        srcs.forEach(function(src){
            var img = '<img src="'+src+'" width="200" />';
            content = content+img;
        })
        var root = self.props.root;

        self.editor.html(content);
        
//        root.updateWidget(consts.WIDGET_TYPE.EXTEND, content);
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnSubmit: function (){
        var root = this.props.root;
        var content = this.editor.html();

        root.closeDialog();
        var isEdit = this.props.isEdit;
        if (isEdit){
            root.updateWidget(consts.WIDGET_TYPE.EXTEND, content);
        } else {
            root.addWidget(consts.WIDGET_TYPE.EXTEND, content);
        }
    },
    render: function (){
        var root = this.props.root;

        var rStyle = {
            top: "50%",
            left: "50%",
            width: "720px",
            height: "auto",
            display: "block",
            borderRadius:'5px',
            overflow:'hidden',
            marginLeft: '-360px',
            marginTop: "-256px"
        };

        return (
            <dialog id="pictureDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <form noValidate　name="form.name" className="form-horizontal" style={{padding:"0 35px"}}>
                        <div className="widget-form-title">
                            <label>{$._('Edit event')}</label>
                        </div>
                        <textarea id="richEditor" ref="textarea" style={{width:"600px",height:"400px"}}></textarea>
                        <div className="form-group buttons" style={{marginTop:"20px"}}>
                            <button type="button" className="btn btn-primary" onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = ExtendDialog;
